<style lang="less">
    .rechargo-m{
        .card-title{
            display: inline-block;
            width: 100%;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            color: #1c2438;
            font-weight: 700;
            overflow: inherit;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .margin-top-10{
        margin-top: 10px;
    }
.order{
    font-size: 16px;
    margin-left: 5px;
}
</style>
<template>
    <div class="rechargo-m">
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Row class="" :gutter="10">
                        <Col :md="4" :lg="2">
                            <div style="margin-top: 2px;">
                                <Icon type="ios-pulse"></Icon>
                                {{this.$route.meta.title}}
                            </div>
                        </Col>
                        <Col :md="20" :lg="22">
                            <Form style="font-size: 12px;" :model="formItem" :label-width="80" inline>
                                <span>用户名：</span>
                                <Input v-model="queryData.user_name.value" size="small" placeholder="请输入用户" style=" width: 150px;"></Input>
                                <span>订单状态：</span>
                                <Select size="small" v-model="formItem.status_code" style="width:80px">
                                    <Option value="0">全部</Option>
                                    <Option value="-1">待处理</Option>
                                    <Option value="1">已转账</Option>
                                    <Option value="2">已拒绝</Option>
                                </Select>
                                <span style="margin-left: 10px;">用户类型：</span>
                                <Select v-model="formItem.group_level" size="small" style="width:100px">
                                    <Option v-for="item in groupList" :value="item.level" :key="item.level">{{ item.name }}</Option>
                                </Select>
                                
                                <span style="margin-left: 10px;">选择日期范围：</span>
                                <DatePicker size="small"  :value="formItem.time" @on-change="setTime" type="daterange" placeholder="请输入日期范围" style="width: 200px"></DatePicker>
                                
                                <Button type="primary"  size="small" style="margin-top: 0px;" @click="search">查询</Button>
                                <Button type="ghost"  size="small" style="margin-top: 0px;" @click="searchReset">重置</Button>
                            </Form>
                        </Col>
                    </Row>
                </p>
                <div class="line-chart-con" >
                    <Table border stripe :columns="title" :data.sync="data" ></Table>
                </div>
                <Row class="margin-top-10" :gutter="10">
                    <Page :total="page.count" :current.sync="page.current" class-name="page-margin-top" show-elevator @on-change="pageTurn" show-sizer @on-page-size-change="listDisplayQuantity"></Page>
                </Row>
            </Card>
        </Row>
        <Modal class="ref-modal" v-model="rechargoModal" :closable='false' :mask-closable=false :width="500">
            <h3 slot="header" style="color:#2D8CF0"><Icon type="cash"></Icon>&nbsp;充值单号：{{editRechargoForm.order_id}}</h3>
            <Form ref="editRechargoForm" :model="editRechargoForm" :label-width="100" label-position="right">
                <FormItem label="用户名：">
                    {{editRechargoForm.user_name}}
                </FormItem>
                <FormItem label="用户备注：">
                    {{editRechargoForm.user_comment}}
                </FormItem>
                <FormItem label="已付金额：">
                    <Input number v-model="editRechargoForm.paid_money"></Input>
                </FormItem>
                <FormItem label="充值金额：">
                    <Input number v-model="editRechargoForm.money"></Input>
                </FormItem>
                <FormItem label="操作备注：">
                    <Input v-model="editRechargoForm.comment" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder=""></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="resetModal">取消</Button>
                <Button type="primary" @click="confirmRechargo">确认充值</Button>
            </div>
        </Modal>
        <Modal class="ref-modal" v-model="downModal" :closable='false' :mask-closable=false :width="500">
            <h3 slot="header" style="color:#2D8CF0"><Icon type="cash"></Icon>&nbsp;充值单号：{{editDownForm.order_id}}</h3>
            <Form ref="editDownForm" :model="editDownForm" :label-width="100" label-position="right">
                <FormItem label="用户名：">
                    {{editDownForm.user_name}}
                </FormItem>
                <FormItem label="充值金额：">
                    {{editDownForm.money}}
                </FormItem>
                <FormItem label="用户备注：">
                    {{editDownForm.user_comment}}
                </FormItem>
                <FormItem label="操作备注：">
                    <Input v-model="editDownForm.comment" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder=""></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="resetModal">取消</Button>
                <Button type="warning" @click="confirmDown">确认拒绝</Button>
            </div>
        </Modal>
    </div>
</template>

<script>


export default {
    components: {
        
    },
    data () {
        return {
            formItem:{
                time:["",""],
                status_code:"0",
                group_level:'0'
            },
            groupList:[{name:'全部',level:'0'},{name:'会员',level:'-1'},{name:'代理',level:'2'}],
            rechargoModal:false,
            downModal:false,
            thisrow:{},
            editRechargoForm:{
                order_id:'',
                user_name:'',
                user_comment:'',
                money:0,
                comment:'',
                paid_money:''
            },
            editDownForm:{
                order_id:'',
                user_name:'',
                user_comment:'',
                money:0,
                comment:'',
                paid_money:''
            },
            order_param:'id',
            userData:{},            
            data:[],
            page:{
                count:0,
                current:1,
                limit:'0,10'
            },
            queryData:{
                user_name:{
                    operator:'=',
                    value:''
                },
                up_uid:{
                    operator:'=',
                    value:''
                },
                status_code:{
                    operator:'=',
                    value:''
                },
                group_level:{
                    operator:'=',
                    value:''
                },
            },
            title:[
                {
                    title:'充值申请编号',
                    key: 'order_id',
                    align:'center',
                },
                {
                    title:'用户名',
                    key: 'user_name',
                    align:'center',
                },
                {
                    title:'用户备注',
                    key: 'user_comment',
                    align:'center',
                },
                {
                    title:'用户类型',
                    key: 'group_name',
                    align:'center',
                },
                {
                    title:'用户余额',
                    key: 'this_balance',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.this_balance
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'充值金额',
                    key: 'money',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.money
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'已付金额',
                    key: 'paid_money',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.paid_money
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'未付金额',
                    key: 'un_paid_money',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.un_paid_money
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'订单状态',
                    key: 'status_code',
                    align:'center',
                    render: (h, params) => {
                           return h('div', [
                               h('Tag',{
                                   props:{
                                       color:params.row.status_code==-1?"yellow":params.row.status_code==1?"green":params.row.status_code==2?"red":"red"
                                   }
                               },params.row.status_code==-1?"待处理":params.row.status_code==1?"已转账":params.row.status_code==2?"已拒绝":"错误"),
                           ])//params.column.key
                    }
                },
                {
                    title:'申请时间',
                    key: 'created',
                    align:'center',
                },
                {
                    title:'最近操作时间',
                    key: 'updated',
                    align:'center',
                },
                {
                    title:'操作备注',
                    key: 'comment',
                    align:'center',
                },
                {
                    title:'操作',
                    key: '',
                    align:'center',
                    render: (h, params) => {
                            if(params.row.status_code==-1){
                                return h('div', [
                                    h('Button',{
                                        props:{
                                            type:"success",
                                            size:"small",
                                        },
                                        on: {
                                            click: () => {
                                                // this.thisrow=JSON.parse(JSON.stringify(params.row))
                                                this.editRechargoForm=JSON.parse(JSON.stringify(params.row))
                                                this.rechargoModal=true
                                            },
                                        },
                                    },"通过"),
                                    h('Button',{
                                        
                                        props:{
                                            type:"error",
                                            size:"small",
                                        },
                                        style:{
                                            'margin-left':'3px'
                                        },
                                        on: {
                                                click: () => {
                                                    // this.thisrow=JSON.parse(JSON.stringify(params.row))
                                                    this.editDownForm=JSON.parse(JSON.stringify(params.row))
                                                    this.downModal=true
                                                },
                                            },
                                    },"拒绝"),
                                ])
                            }else{
                                return h('div', [
                                    h('Button',{
                                        props:{
                                            type:"success",
                                            size:"small",
                                            disabled:true
                                        }
                                    },"已处理"),
                                ])
                            }
                           
                    }
                },
            ]
                
            
        }
    },
    computed: {
        
    },
    methods: {
        init (){
            // this.formItem.time=this.getNowFormatDate()
            let group = JSON.parse(sessionStorage.group)
            let u=JSON.parse(sessionStorage.user)
            // for(let i=0;i<group.length;i++){
            //     if(group[i].level==-1){
            //         this.groupList.push(group[i])
            //     }
            //     if(group[i].level!=-2&&group[i].level>u.user_data.User.group_level){
            //         this.groupList.push(group[i])
            //     }
            // }
            this.userData=u.user_data.User
            this.queryData.up_uid.value=u.user_data.User.id
            this.getRecharge ()
        },
        setTime(t){
            
            this.formItem.time=t
        },
        search(){
            this.setSearch ()
            this.getRecharge ()
        },
        searchReset(){
            this.queryData.user_name.value=''
            this.formItem.time=["",""]
            this.formItem.status_code="0"
            this.formItem.group_level="0"
            this.setSearch ()
            this.getRecharge ()
        },
        setSearch(){
            this.queryData.status_code.value=this.formItem.status_code!=="0"?this.formItem.status_code:''
            // this.queryData.group_level.value=this.formItem.group_level!=="0"?this.formItem.group_level:''
            switch (true){
                case this.formItem.group_level=='0':
                    this.queryData.group_level.value=''
                    this.queryData.group_level.operator='='
                    break;
                case this.formItem.group_level=='-1':
                    this.queryData.group_level.value=this.formItem.group_level
                    this.queryData.group_level.operator='='
                    break;
                case this.formItem.group_level=='2':
                    this.queryData.group_level.value=this.formItem.group_level
                    this.queryData.group_level.operator='>'
                    break;
            }
        },
        resetModal(){
            this.rechargoModal=false
            this.downModal=false
        },
        confirmRechargo(){
            this.handle(this.editRechargoForm,1)
        },
        confirmDown(){
            this.handle (this.editDownForm,2)
        },
        handle(r,n){
            let data={
                money:r.money,
                id:r.id,
                uid:r.uid,
                up_uid:r.up_uid,
                version:r.version,
                status_code:n,
                paid_money:r.paid_money,
                comment:r.comment
            }
            this.$api.repeater(this,'setRecharge',data).then(res=>{
                if(res.success==true){
                    this.$Notice.success({
                        title: '操作成功',
                    });
                    this.rechargoModal=false
                    this.downModal=false
                    this.data[r._index].status_code=res.data.status_code
                    this.data[r._index].this_balance=res.data.this_balance
                    this.data[r._index].un_paid_money=res.data.un_paid_money
                    this.data[r._index].paid_money=res.data.paid_money
                    this.data[r._index].money=res.data.money
                    this.data[r._index].updated=res.data.updated
                    this.data[r._index].comment=res.data.comment
                }else{
                    this.$Notice.error({
                        title: '操作失败',
                        desc: res.error
                    });
                }
            })
        },
        getNowFormatDate () {
            let time = (data) =>{
                let date = new Date();
                if(data) date.setDate(date.getDate()+data);
                let Y = date.getFullYear()
                let M = date.getMonth() + 1;
                let D = date.getDate();
                let h = date.getHours()
                let m = date.getMinutes()
                let s = date.getSeconds()
                if (M >= 1 && M <= 9) M = "0" + M;
                if (D >= 0 && D <= 9) D = "0" + D;
                if (h >= 0 && h <= 9) h = "0" + h;
                if (m >= 0 && m <= 9) m = "0" + m;
                if (s >= 0 && s <= 9) s = "0" + s;
                return `${Y}-${M}-${D}`
            }
            return [time(-30),time(1)];
        },
        getRecharge (){
            let data={
                limit:this.page.limit,
                order_param:this.order_param,
                query_params:this.$oc.ocqm(this.queryData),
                time_between:this.formItem.time[0]!==""?`${this.formItem.time[0]},${this.formItem.time[1]}`:''
            }
            this.$api.repeater(this,'getRecharge',data).then(res=>{
                this.page.count=res.data.Count
                if(res.data.Records==null){
                    this.data=[]
                }else{
                    this.data=res.data.Records
                }
            })
        },
        order(key){
            this.order_param=this.order_param==key?'id':key
            this.getRecharge()
        },
        //翻页
        pageTurn(ev){
            let limit=this.page.limit.split(",");
            this.page.limit=`${(ev-1)*limit[1]},${limit[1]}`
            this.getRecharge()
        },
        //列表显示行数
        listDisplayQuantity(ev){
            this.page.limit=`0,${ev}`
            this.getRecharge()
        },
        //回到第一页
        startPage(){
            this.page.current=1
            let limit=this.page.limit.split(",");
            this.page.limit=`0,${limit[1]}`
        },
    },
    mounted (){
        this.init()
    }
};
</script>
